<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>医生注册</title>
		<style>
			body { font-family: Arial, sans-serif; }
			.register-form { max-width: 400px; margin: 50px auto; padding: 20px; border: 20px solid #1a73e8; border-radius: 0; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
			.input-group { margin-bottom: 15px; }
			label { display: block; margin-bottom: 5px; }
			input, select { width: 100%; padding: 8px; box-sizing: border-box; }
			button { background: #4CAF50; color: white; padding: 10px; border: none; width: 100%; cursor: pointer; }
			.error { color: red; font-size: 12px; }
			.upload-area { border: 3px dashed #ccc; padding: 20px; text-align: center; margin-bottom: 15px; }
		</style>
	</head>
	<body>
		<div class="register-form">
			<h2 style="text-align: center; background: #e6f2ff; padding: 10px; border-radius: 5px;">医生注册</h2>
			<form id="registerForm">
				<h3 style="background: #e6f2ff; padding: 8px; border-radius: 5px;">基本信息</h3>
				<div class="input-group">
					<label for="name">真实姓名</label>
					<input type="text" id="name" required>
				</div>
				<div class="input-group">
					<label for="idCard">身份证号码</label>
					<input type="text" id="idCard" required>
					<div id="idCardError" class="error"></div>
				</div>
				<div class="input-group">
					<label for="phone">手机号码</label>
					<input type="tel" id="phone" required>
					<div id="phoneError" class="error"></div>
				</div>
				<div class="input-group">
					<label for="email">电子邮箱</label>
					<input type="email" id="email" required>
					<div id="emailError" class="error"></div>
				</div>

				<h3 style="background: #e6f2ff; padding: 8px; border-radius: 5px;">职业资质</h3>
				<div class="input-group">
					<label for="license">医师执业证书编号</label>
					<input type="text" id="license" required>
				</div>
				<div class="input-group">
					<label for="department">执业范围与科室</label>
					<select id="department" required>
						<option value="">请选择科室</option>
						<option value="内科">内科</option>
						<option value="外科">外科</option>
						<option value="儿科">儿科</option>
						<option value="妇产科">妇产科</option>
					</select>
				</div>
				<div class="input-group">
					<label for="title">职称</label>
					<select id="title" required>
						<option value="">请选择职称</option>
						<option value="住院医师">住院医师</option>
						<option value="主治医师">主治医师</option>
						<option value="副主任医师">副主任医师</option>
						<option value="主任医师">主任医师</option>
					</select>
				</div>
				<div class="input-group">
					<label>医院工牌照片</label>
					<div class="upload-area" id="uploadArea">
						<p>点击或拖拽上传照片</p>
						<input type="file" id="badgePhoto" accept="image/*" style="display: none;">
					</div>
					<div id="photoError" class="error"></div>
				</div>

				<button type="submit">注册</button>
			</form>
		</div>
		<script>
			// 图片上传交互
			const uploadArea = document.getElementById('uploadArea');
			const badgePhoto = document.getElementById('badgePhoto');

			uploadArea.addEventListener('click', () => {
				badgePhoto.click();
			});

			badgePhoto.addEventListener('change', (e) => {
				if (e.target.files.length > 0) {
					uploadArea.innerHTML = `<p>已选择: ${e.target.files[0].name}</p>`;
				}
			});

			// 表单验证
			document.getElementById('registerForm').addEventListener('submit', function(e) {
				e.preventDefault();
				let isValid = true;

				// 身份证验证
				const idCard = document.getElementById('idCard').value;
				if (!/^\d{17}[\dXx]$/.test(idCard)) {
					document.getElementById('idCardError').textContent = '请输入有效的身份证号码';
					isValid = false;
				} else {
					document.getElementById('idCardError').textContent = '';
				}

				// 手机号验证
				const phone = document.getElementById('phone').value;
				if (!/^1[3-9]\d{9}$/.test(phone)) {
					document.getElementById('phoneError').textContent = '请输入有效的手机号码';
					isValid = false;
				} else {
					document.getElementById('phoneError').textContent = '';
				}

				// 邮箱验证
				const email = document.getElementById('email').value;
				if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
					document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
					isValid = false;
				} else {
					document.getElementById('emailError').textContent = '';
				}

				// 照片验证
				if (!badgePhoto.files || badgePhoto.files.length === 0) {
					document.getElementById('photoError').textContent = '请上传医院工牌照片';
					isValid = false;
				} else {
					document.getElementById('photoError').textContent = '';
				}

				if (isValid) {
					// 验证通过，显示成功提示
					const form = document.getElementById('registerForm');
					form.innerHTML = `
						<h3 style="text-align: center;">注册成功！</h3>
						<p style="text-align: center;">您的账号已成功注册</p>
						<button type="button" onclick="location.href='首页.html'">返回登录</button>
					`;
				}
			});
		</script>
	</body>
</html>